<!DOCTYPE html>
<html>
<head>
	<title>注册</title>
	<meta charset="utf-8">
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
	<style>
		
		#LoginWin{
			background-color:rgb(237, 252, 242);;
			border:1px solid rgb(181, 214, 230);
			margin:auto;
			width:300px;
			height:350px;
			position:relative;
			text-align:center;
		}
		#LoginWin #register{
			position:absolute;
			right:30px;
			bottom:30px;
		}
		#LoginWin #forget{
			position:absolute;
			left:30px;
			bottom:30px;
		}
		#LoginWin a{
			text-decoration:none;
			color:#698bae;
		}
		#LoginWin input{
			width:150px;
			font-size:15px;
		}
		.cclick{
			cursor: pointer;
		}
		.cclick:active{
			opacity: 0.5;
		}
	</style>
</head>
<body>
	<div id="login-box" class="" style="width:100%;height:100%;position:fixed;top:0;left:0;background:white;padding-top: 200px;z-index:9;">
		<div class="stage" id="LoginWin">
			<form id="form" method="post" action="RegisterController">
				<br><div style="font-size:12px;">JPetStore</div><br>
				<input name="nick_name" type="text" id="nick_name" placeholder="昵称" value="" onblur="nick_name_blur()"><span id="tip" style="position: absolute;"></span><br><br>
				<input name="password" type="password" id="password" placeholder="密码" value=""><br><br>
				<input name="code" type="text" id="code" placeholder="验证码" value=""><br><br>
				<img src="CodeController" id="code_img" onclick="refresh_code()"><br><br>
				<input type="button" class="cclick" id="login_button" onclick="register()" value="注册" style="cursor:pointer;"><br><br>

			</form>
		</div>
	</div>
	<script>
		const ServerApi="/JPetStore/api/"
		var nick_name_exist=false;
		function register(){
            
			var nick_name=document.getElementById("nick_name").value;
			var password=document.getElementById("password").value;
			var code=document.getElementById("code").value;

			if(nick_name_exist){
				alert("该昵称已存在");
				return;
			}
            if(!check_nick_name(nick_name)){
                alert("昵称格式不正确，应该为1-6位数字字母或汉字");
                return;
            }
            if(!check_password(password)){
                alert("密码格式不正确，应该为3-12位数字或字母");
                return;
            }
			if(!check_code(code)){
				alert("验证码格式不正确，应该为4位数字或字母");
				return;
			}
            
			document.getElementById("form").submit();

        }
		function refresh_code(){
			var img=document.getElementById("code_img");
			img.src="CodeController?"+Math.random();
		}
		function check_nick_name(nick_name){
			var re=/^[\u4E00-\u9FA50-9a-zA-Z]{1,6}$/;
			if (!re.test(nick_name)) return false ;
			return true;
		}
		function check_password(password){
			var re=/^[0-9a-zA-Z]{3,12}$/;
			if (!re.test(password)) return false ;
			return true;
		}
		function check_code(code){
			var re=/^[0-9a-zA-Z]{4}$/;
			if (!re.test(code)) return false ;
			return true;
		}
		function nick_name_blur(){
			var nick_name=document.getElementById("nick_name").value;
			if(!check_nick_name(nick_name)){
				$("#tip").html("格式错误").css("color","red");
				return;
			}
			UsernameIsExistServlet(nick_name);
		}
		function UsernameIsExistServlet(nick_name){
			$.ajax({
				url:ServerApi+"UsernameIsExistServlet",
				data:{
					nick_name:nick_name
				},
				success:function(res){
					res=JSON.parse(res);
					if(res.status!=200){
						error(res.msg);
					} else {
						nick_name_exist=res.data.exist;
						if(nick_name_exist){
							$("#tip").html("已存在").css("color","red");
						} else {
							$("#tip").html("合法").css("color","green");
						}
					}
				},
				error:function (){
					error("服务器异常");
				}
			})
		}

		function error(msg){
			alert(msg);
		}
	</script>
</body>
</html>